<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page
    import="com.google.appengine.api.users.UserService,com.google.appengine.api.users.UserServiceFactory,local.kexnichi.appengine.gcalfinance.utility.Constants,local.kexnichi.appengine.gcalfinance.utility.Utility,java.util.Map"%>
<%
    UserService userService = UserServiceFactory.getUserService();
    Map<String, String[]> param = request.getParameterMap();
    StringBuilder uriParam = new StringBuilder();
    String[] paramValues = param.get("date");
    Utility.createParamString(uriParam, paramValues, "date");
    paramValues = param.get("calendarid");
    Utility.createParamString(uriParam, paramValues, "calendarid");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>GCalFinance</title>
<meta name="viewport" content="width=device-width, initital-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/img/icon.png" />
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="stylesheet"
    href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script
    src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<body>
    <div data-role="page" id="home" data-fullscreen="true">
        <header data-role="header" data-position="fixed" data-tap-toggle="false">
            <h1>GcalFinance</h1>
        </header>
        <div data-role="content" style="margin: 45px 0px 40px 0px;">
            <h1>GCalFinance</h1>
            <p>Googleカレンダーを利用して家計簿をつけます。</p>
            <div div data-role="collapsible" data-content-theme="c">
                <h3>準備編</h3>
                <ol>
                    <li><a href="https://www.google.com/calendar/render" target="_blank">Googleカレンダー</a>にログインします。</li>
                    <li>カテゴリ毎にカレンダーを作成します。</li>
                    <table
                        style="border-style: dotted; border-width: 1px;">
                        <tbody>
                            <tr>
                                <td>カレンダー名</td>
                                <td>カテゴリ名を記入</td>
                            </tr>
                            <tr>
                                <td>場所</td>
                                <td>カテゴリの一ヶ月あたりの予算を記入</td>
                            </tr>
                        </tbody>
                    </table>
                    <li>表示用のページを作成してBookmarkする。</li>
                    <ol>
                        <li><a
                            href="<%=userService.createLoginURL("/auth/config")%>">設定ページ</a>を開く</li>
                        <li>カテゴリとして利用するカレンダーを選択する</li>
                        <li>決定ボタンを押す</li>
                        <li>開いた画面をBookmarkする</li>
                    </ol>
                </ol>
            </div>
            <div div data-role="collapsible" data-content-theme="c">
                <h3>利用編</h3>
                <ol>
                    <li>お金を使ったらGoogleカレンダーにイベントを登録する。</li>
                    <table
                        style="border-style: dotted; border-width: 1px;">
                        <tbody>
                            <tr>
                                <td>イベント名</td>
                                <td>金額を記入</td>
                            </tr>
                            <tr>
                                <td>日時</td>
                                <td>お金を使った日付を指定</td>
                            </tr>
                            <tr>
                                <td>カレンダー</td>
                                <td>カテゴリを指定</td>
                            </tr>
                            <tr>
                                <td>説明</td>
                                <td>お金の利用用途を記入</td>
                            </tr>
                        </tbody>
                    </table>
                    <li>Bookmarkした表示用のページを開く</li>
                </ol>
            </div>
            <a
                href="<%=userService.createLoginURL(uriParam.insert(0,
                    Constants.MAIN_URI).toString())%>"
                data-role="button" data-icon="forward" rel="external">Login</a>
        </div>
        <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
            <h5>Copyright &copy; 2013</h5>
        </footer>
    </div>
</body>
</html>